<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分支结构</title>
</head>

<body>

  <pre>
    v-if v-show 的区别
    v-if 不满足条件的会从DOM结构中移除
    v-show 不满足条件的，用css display：none 给隐藏

    如何选择？
    
    如果一个元素需要频发你的显示与隐藏，推荐使用v-show，因为v-if是把元素从DOM结构中
    移除，比较消耗性能

    如果一个元素知识简单的显示和隐藏，不需要频繁的切换，这时推荐 v-if
  </pre>
  <div class="app">
    <p v-if='age<6'>幼儿园</p>
    <p v-else-if='age<12 && age >6'>小学</p>
    <p v-else-if='age<18 && age >12'>中学</p>
    <p v-else>大学</p>

    <p v-show='age===12'>haha</p>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '.app',
      data: {
        age: 10,
      },
      methods: {

      }
    })
  </script>
</body>

</html>